<template>
  <view>
    <!-- 弹层组件 -->
    <uni-popup ref="popup" type="bottom" :mask-click="false">
      <scroll-view scroll-y="true" style="height: 1030rpx;">
        <view class="popup-content">
          <view class="one-title" v-for="(i,index) in infoList" :key="id">
            {{i.name}}
            <view class="tow-card">
              <view class="tow-card-item" v-for="(it,index) in i.type" :key="id">
                {{it}}
              </view>
            </view>
          </view>
          <view class="card-anniu">
            <button type="primary" size="mini">清除条件</button>
            <button type="primary" size="mini" @click="closed">确认筛选</button>
          </view>
        </view>

      </scroll-view>

    </uni-popup>
  </view>
</template>

<script>
  export default {
    name: "pop-up",
    props: {
      infoList: {
        type: Array,
        required: true
      }
    },
    data() {
      return {

      };
    },
    methods: {
      open() {
        this.$refs.popup.open()
      },
      closed() {
        this.$refs.popup.close()
      },
    }
  }
</script>

<style lang="scss">
  // 弹层组件修改高度
  .vue-ref {
    top: 80rpx
  }

  // 弹层
  .popup-content {
    top: 800rpx;
    background-color: #fff;
    padding: 20rpx;
    z-index: 999;

    .one-title {
      font-size: 28rpx;

      .tow-card {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 30rpx;

        .tow-card-item {
          font-size: 22rpx;
          width: 132rpx;
          height: 46rpx;
          border: 1px solid #979191;
          color: #979191;
          line-height: 40rpx;
          text-align: center;
          border-radius: 28rpx;
          margin: 20rpx 20rpx 0 20rpx;
        }
      }
    }
  }

  .card-anniu {
    display: flex;
    justify-content: space-evenly;
  }

  button[size=mini] {
    height: 70rpx;
    width: 320rpx;
    display: inline-block;
    font-size: 26rpx;
    line-height: 70rpx;
    padding: 0 1.34em;
    border-radius: 40rpx;
  }

  button[type=primary] {
    background-color: #3f51b5;
    color: #fff;
  }
</style>
